import React from 'react'
import Tab from 'lib/components/tab.jsx'
import View from './View.jsx'
import imgSrc from 'lib/util/ImageSource'
import Resizable from 'lib/components/Resizable.jsx';

export default class AndroidView extends View{
  constructor(props, context) {
    super(props, context);

    this.state.maxWidth = 100;
  }

  resizeImage(current) {
    if (this.state.maxWidth + 90 !== current.width) {
      this.setState({
        maxWidth: current.width - 90
      })
    }
  }

  render(){
    return (
      <Resizable onResize={ this.resizeImage.bind(this) }>
        <fieldset>
          <legend>1. 命名你的应用程序</legend>
          <div className="form-section">
            <p>Agent 安装成功后，你可以随时重命名你的应用程序</p>
            {
              this.renderForm()
            }
          </div>
        </fieldset>
        <fieldset>
          <legend>2. 选择开发环境</legend>
          <div className="form-section">
            <p className="note-attention">推荐使用 Ant 安装方式。</p>
            <p className="note-attention">注意：Agent 不支持只有 jre 的运行环境。</p>
            <Tab>
            <Tab.Panel title='Ant(IDEA)'>
              <div className="form-section">
                <ul className="form-ul">
                  <li>
                    <h5>安装 OneAPM Agent</h5>
                    <a className="btn-download" download target="_blank" href={this.state.ANDROID_AGENT_url}>
                      <i className="iconfont">&#xe650;</i>OneAPM_Android_Agent.zip
                    </a>
                  </li>
                  <li>
                    <p>
                      <a target="_blank" href="http://www.oneapm.com/docs/mi/IntelliJ%20IDEA%20eclipse%20%E9%A1%B9%E7%9B%AE%E5%AE%89%E8%A3%85%E6%96%B9%E6%B3%95.html">IDEA 安装方法链接</a>
                    </p>
                  </li>
                  <li>
                    <h5>添加 OneAPM 至你的 App</h5>
                    <p>复制文件 <code>{ 'OneAPM_Android_Ant_{VERSION}/oneapm-android-agent.jar' }</code> 到你的 App 目录 libs下。</p>
                  </li>
                  <li>
                    <h5>添加 class.rewriter.jar 到 ANT_OPTS 环境变量</h5>
                    <p>通过更改 ANT_OPTS 环境变量，将 OneAPM 添加至 Ant 加载选项中。</p>
                    <ul className="form-ul">
                      <li>
                        <p>Mac OS / Linux</p>
                        <code>{'export ANT_OPTS="-javaagent:/path/to/OneAPM_Android_Ant_{VERSION}/class.rewriter.jar"'}</code>
                      </li>
                      <li>
                        <p>Windows</p>
                        <code>{'set ANT_OPTS="-javaagent:/path/to/OneAPM_Android_Ant_{VERSION}/class.rewriter.jar"'}</code>
                      </li>
                    </ul>
                  </li>
                </ul>
              </div>
            </Tab.Panel>
            <Tab.Panel title='Eclipse'>
              <div className="form-section">
                <ul className="form-ul">
                  <li>
                    <h5>OneAPM Android SDK支持在 Eclipse 集成开发环境中直接使用和部署。</h5>
                    <h5><b>（1）查看 Eclipse 版本号</b></h5>
                    <p>
                      OneAPM Eclipse 插件支持 Eclipse 3.8 及以上版本，请于安装前确认您使用的 Eclipse 版本号
                    </p>
                    <p>Mac OS 下</p>
                    <code>点击进入“关于 Eclipse”</code>
                    <p>Windows 下</p>
                    <code>点击进入“About Eclipse”或者是“About ADT”</code>
                    <p>
                      i. 点击Help, 打开 “关于 Eclipse” 可查看当前版本号
                    </p>
                    <img style={{ maxWidth: this.state.maxWidth }} src={imgSrc('setup/android-eclipse-new-1.png')} />
                    <p>
                      ii. 如下图所示, 红色方框内的版本号信息.(如未见详细版本号,可点击进人“Eclipse Plugin”查看,详见步骤iii)
                    </p>
                    <img style={{ maxWidth: this.state.maxWidth }} src={imgSrc('setup/android-eclipse-new-2.png')} />
                    <p>iii.如果您的eclipse版本号在上图中没有出现, 可以点击上图中的底部 Eclipse 图标,点击后弹出对话框, 如下图所示:</p>
                    <img style={{ maxWidth: this.state.maxWidth }} src={imgSrc('setup/android-eclipse-new-3.png')} />
                  </li>
                  <li>
                    <h5><b>（2）安装 OneAPM Eclipse 插件：</b></h5>
                    <p>i. 在 Eclipse 集成开发环境中点击“Help”菜单，选择“Install New Software...”</p>
                    <img style={{ maxWidth: this.state.maxWidth }} src={imgSrc('setup/android-eclipse-new-4.png')} />
                    <p>ii.  点击Work with项右侧的“Add…”按钮来增加 OneAPM Eclipse 插件。</p>
                    <img style={{ maxWidth: this.state.maxWidth }} src={imgSrc('setup/android-eclipse-new-5.png')} />
                    <p>iii. 设置插件的名称（比如OneAPM）以及URL地址：</p>
                    <p>Eclipse 插件需要 JAVA_HOME 环境变量，目前已支持最新 4.4 版本 Eclipse。</p>
                    <p className="note">Eclipse 4.4 及之后版本请使用以下链接：</p>
                    <code>https://download.oneapm.com/android_agent/eclipse_gt_4.4/</code>
                    <p className="note-attention">注：OneAPM Eclipse 4.4 插件需要 JDK 1.8。</p>
                    <p className="note">Eclipse 4.4 之前版本请使用以下链接：</p>
                    <code>https://download.oneapm.com/android_agent/eclipse_lt_4.4/</code>
                    <p>例如, Eclipse 4.4版本就可使用</p>
                    <code>https://download.oneapm.com/android_agent/eclipse_gt_4.4/</code>
                    <img style={{ maxWidth: this.state.maxWidth }} src={imgSrc('setup/android-eclipse-new-6.png')} />
                    <p>iv. 在Work with选项中选中刚才添加的资料库，在下方列表中点击“Select All”选中所有的插件。点击“Next >”到下一步。</p>
                    <img style={{ maxWidth: this.state.maxWidth }} src={imgSrc('setup/android-eclipse-new-7.png')} />
                    <p>v. 查看插件描述并点击“Next >”进入下一步。</p>
                    <img style={{ maxWidth: this.state.maxWidth }} src={imgSrc('setup/android-eclipse-new-8.png')} />
                    <p>vi. 查看许可协议，选择“I accept the terms of the license agreement”，点击“Finish>”进入下一步。</p>
                    <img style={{ maxWidth: this.state.maxWidth }} src={imgSrc('setup/android-eclipse-new-9.png')} />
                    <p>vii. 选择信任插件的签名证书，点击“OK”。</p>
                    <img style={{ maxWidth: this.state.maxWidth }} src={imgSrc('setup/android-eclipse-new-10.png')} />
                    <p>viii. 点击“Yes”重启 Eclipse 来完成插件的安装。</p>
                    <img style={{ maxWidth: this.state.maxWidth }} src={imgSrc('setup/android-eclipse-new-11.png')} />
                  </li>
                  <li>
                    <h5><b>（3）插件安装完成后，右击需要监控的App，选择“安装OneAPM”</b></h5>
                    <img style={{ maxWidth: this.state.maxWidth }} src={imgSrc('setup/android-eclipse-new-12.png')} />
                    <p>Eclipse 会自动添加“oneapm-android-agent.jar”包到libs目录下，若没有libs目录请新建一个。</p>
                    <img style={{ maxWidth: this.state.maxWidth }} src={imgSrc('setup/android-eclipse-new-13.png')} />
                    <p className="note-attention">
                      {'注：Eclipse 插件目前只支持JDK（1.5 - 1.8）运行环境（不支持只有JRE的运行环境）'}<br/>
                      <span style={{marginLeft: '26px'}}>{'Window 安装Eclipse插件时，请在没有空格和特殊字符的路径安装JDK'}<br/></span>
                      <span style={{marginLeft: '26px'}}>{'Eclipse 插件需要使用JAVA_HOME环境变量，请检查环境变量,如果提示SDK 安装后提示错误信息：'}<br/>{'由于使用 JRE 运行 Eclipse 导致 OneAPM 无法正确加载，请参考链接：https://oneapm.kf5.com/posts/view/48050/'}</span>
                    </p>
                  </li>
                </ul>
              </div>
            </Tab.Panel>
            <Tab.Panel title='Android Studio（Gradle）'>
              <div className="form-section">
                <ul className="form-ul">
                  <li>
                    <h5>下载并解压 OneAPM SDK</h5>
                    <a className="btn-download" download target="_blank" href={this.state.ANDROID_GRADLE_url}><i className="iconfont">&#xe650;</i>OneAPM_Android_Agent.zip</a>
                  </li>
                  <li>
                    <h5>配置Gradle:</h5>
                    <p>首先我们将 plugin 文件夹整体拷贝到项目根目录, 具体如下图所示</p>
                    <img style={{ maxWidth: this.state.maxWidth }} src={imgSrc('setup/gradle-1.png')} alt=""/>
                    <p>打开工程根目录下的 build.gradle 文件</p>
                    <img style={{ maxWidth: this.state.maxWidth }} src={imgSrc('setup/gradle-2.png')} alt=""/>
                    <p>在 dependencies 模块中加入代码</p>
                    <code>{"classpath fileTree(dir: 'plugin', include: ['*.jar'])"}</code>
                    <img style={{ maxWidth: this.state.maxWidth }} src={imgSrc('setup/gradle-3.png')} alt=""/>
                  </li>
                  <li>
                    <h5>引入 OneAPM</h5>
                    <p>将agent文件夹下的 oneapm-android-agent.jar 文件拷贝至项目libs目录下(如没有此目录请自行创建)</p>
                    <img style={{ maxWidth: this.state.maxWidth }} src={imgSrc('setup/gradle-4.png')} alt=""/>
                    <p>打开主模块目录下的 build.gradle 文件</p>
                    <img style={{ maxWidth: this.state.maxWidth }} src={imgSrc('setup/gradle-5.png')} alt=""/>
                    <p>在文件头部引入 OneAPM</p>
                    <code>{"apply plugin: 'oneapm'"}</code>
                    <img style={{ maxWidth: this.state.maxWidth }} src={imgSrc('setup/gradle-6.png')} alt=""/>
                    <p>如此即完成了 oneapm 的引入</p>
                    <p>建议 Rebuild & Clean 项目，来确保 OneAPM 配置生效。</p>
                    <p className="note-attention">如果 {'dependencies'} 没有如下的配置</p>
                    <p className="note-attention"><code>{"compile fileTree(include: ['*.jar'], dir: 'libs')"}</code></p>
                    <p className="note-attention">请在 {'dependencies'} 中加入如下配置</p>
                    <p><code>{"compile files('libs/oneapm-android-agent.jar')"}</code></p>
                  </li>
                </ul>
              </div>
            </Tab.Panel>
            <Tab.Panel title='Maven'>
             <div className="form-section">
               <ul className="form-ul">
                 <p className="note-attention">下面配置使用到的PLUGIN_VERSION，需要替换成解压后相应的版本号。例如：下载版本为OneAPM_Android_Maven_2.0.1，需将PLUGIN_VERSION设置为2.0.1。</p>
                 <li>
                   <h5>下载maven插件包解压，假设解压之后的路径是PATH_TO_ONEAPM_MAVEN_PATH 后续会用到；解压之后会有3个.jar文件一个.pom文件，这些文件下面的操作步骤会用到</h5>
                   <a className="btn-download" download target="_blank" href={this.state.ANDROID_MAVEN_url}>
                     <i className="iconfont">&#xe650;</i>OneAPM_Android_Maven_Plugin.zip
                   </a>
                 </li>
                 <li>
                   <h5>注册解压后文件夹中的jar包为本地maven库</h5>
                   <p>注册oneapm-android-agent.jar</p>
                   <code>{"mvn install:install-file -DgroupId=com.oneapm.agent.android  -DartifactId=agent.android   -Dversion=PLUGIN_VERSION  -Dpackaging=jar -Dfile=PATH_TO_ONEAPM_MAVEN_PATH/oneapm-android-agent.jar"}</code>
                   <p>注册class.rewriter.jar</p>
                   <code>mvn install:install-file -DgroupId=com.oneapm.agent.android  -DartifactId=class.rewriter  -Dversion=PLUGIN_VERSION  -Dpackaging=jar -Dfile=PATH_TO_ONEAPM_MAVEN_PATH/class.rewriter.jar</code>
                 </li>
                 <li>
                   <h5>注册oneapm-android-maven-plugin.jar和plugin.maven.pom</h5>
                   <code>mvn install:install-file -DgroupId=com.oneapm.agent.android  -DartifactId=plugin.maven  -Dversion=PLUGIN_VERSION  -Dpackaging=jar  -Dfile=PATH_TO_ONEAPM_MAVEN_PATH\plugin.maven.jar -DpomFile=PATH_TO_ONEAPM_MAVEN_PATH\plugin.maven.pom</code>
                   <p>例如：</p>
                   <code>mvn install:install-file -DgroupId=com.oneapm.agent.android  -DartifactId=plugin.maven  -Dversion=PLUGIN_VERSION  -Dpackaging=jar  -Dfile=E:\agent\gitlab\android-maven-plugin\target\plugin.maven.jar -DpomFile=E:\agent\gitlab\android-maven-plugin\target\plugin.maven.pom</code>
                   <p className="note-attention">
                     注意：-Dfile=这个后面一定不要有空格，否则运行maven会报错！！！
                   </p>
                 </li>
                 <li>
                   <h5>配置本地pom.xml文件，添加刚才注册的jar包，如下依赖：</h5>
                   <code>
                     {"<dependency>"}<br/>
                     {"<groupId>com.oneapm.agent.android</groupId>"}<br/>
                     {"<artifactId>agent.android</artifactId>"}<br/>
                     {"<version>1.0.8</version>"}<br/>
                     {"</dependency>"}<br/>
                     {"插件: "}<br/>
                     {"<plugin> "}<br/>
                     {"<groupId>com.oneapm.agent.android</groupId> "}<br/>
                     {"<artifactId>plugin.maven</artifactId>"}<br/>
                     {"<version>1.0.8</version>"}<br/>
                     {"<executions>"}<br/>
                     {"<execution>"}<br/>
                     {"<goals>"}<br/>
                     {"<goal>instrument</goal>"}<br/>
                     {"</goals>"}<br/>
                     {"</execution>"}<br/>
                     {"</executions>"}<br/>
                     {"</plugin>"}
                   </code>
                   <p>完整如下</p>
                   <code>
                     {"<groupId>xxx.yyy.zzzz</groupId>"}<br/>
                         {"<artifactId>TestMavenAndroid02</artifactId>"}<br/>
                         {"<version>1.0</version>"}<br/>
                         {"<packaging>apk</packaging>"}<br/>
                         {"<dependencies>"}<br/>
                             {"<dependency>"}<br/>
                                 {"<groupId>com.google.android</groupId>"}<br/>
                                 {"<artifactId>android</artifactId>"}<br/>
                                 {"<version>4.1.1.4</version>"}<br/>
                                 {"<scope>provided</scope>"}<br/>
                             {"</dependency>"}<br/>
                             {"<dependency>"}<br/>
                                 {"<groupId>com.oneapm.agent.android</groupId>"}<br/>
                                 {"<artifactId>agent.android</artifactId>"}<br/>
                                 {"<version>1.0.8</version>"}<br/>
                             {"</dependency>"}<br/>
                         {"</dependencies>"}<br/>
                         {"<build>"}<br/>
                             {"<finalName>${project.artifactId}</finalName>"}<br/>
                             {"<sourceDirectory>src</sourceDirectory>"}<br/>
                             {"<plugins>"}<br/>
                                 {"<plugin>"}<br/>
                                     {"<groupId>com.jayway.maven.plugins.android.generation2</groupId>"}<br/>
                                     {"<artifactId>android-maven-plugin</artifactId>"}<br/>
                                     {"<version>4.0.0-rc.2</version>"}<br/>
                                     {"<configuration>"}<br/>
                                         {"<sdk>"}<br/>
                                             {"<platform>19</platform>"}<br/>
                                         {"</sdk>"}<br/>
                                         {"<manifest>"}<br/>
                                             {"<debuggable>true</debuggable>"}<br/>
                                         {"</manifest>"}<br/>
                                     {"</configuration>"}<br/>
                                     {"<extensions>true</extensions>"}<br/>
                                 {"</plugin>"}<br/>
                         {"<plugin>"}<br/>
                           {"<groupId>com.oneapm.agent.android</groupId>"}<br/>
                           {"<artifactId>plugin.maven</artifactId>"}<br/>
                           {"<version>1.0.8</version>"}<br/>
                           {"<executions>"}<br/>
                             {"<execution>"}<br/>
                               {"<goals>"}<br/>
                                 {"<goal>instrument</goal>"}<br/>
                               {"</goals>"}<br/>
                             {"</execution>"}<br/>
                           {"</executions>"}<br/>
                           {"</plugin>"}<br/>
                             {"</plugins>"}<br/>
                         {"</build>"}<br/>
                   </code>
                 </li>
               </ul>
             </div>
            </Tab.Panel>
          </Tab>
          </div>

        </fieldset>
        <fieldset>
          <legend>3. 配置授权信息</legend>
          <div className="form-section">
            <p>确保应用程序的 AndroidManifest.xml 配置文件中，引入了以下请求授权</p>
            <code>
              { '<!--发送性能数据到服务器需要该权限--> '} <br />
              { '<uses-permission android:name="android.permission.INTERNET" /> '} <br />
              { '<!--发送性能数据到服务器需要该权限--> '} <br />
              { '<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> '} <br />
              { '<!--sdk读取设备识别码需要该权限--> '} <br />
              { '<uses-permission android:name="android.permission.READ_PHONE_STATE" /> '} <br />
              { '<!--【非必选】若想知道 Crash 的时候，后台有哪些任务运行，请引入该权限--> '} <br />
              { '<uses-permission android:name="android.permission.GET_TASKS" /> '}
            </code>
            <p className="note-attention">注意：如果您的应用使用 proguard 混淆，请配置以下</p>
            <code>
              { '-keep class org.apache.http.impl.client.**' } <br />
              { '-dontwarn org.apache.commons.**' } <br />
              { '-keep class com.blueware.** { *; }' } <br />
              { '-dontwarn com.blueware.**' } <br />
              { '-keep class com.oneapm.** {*;}' } <br />
              { '-dontwarn com.oneapm.**' } <br />
              { '-keepattributes Exceptions, Signature, InnerClasses' }
            </code>
            <p className="note-attention">注意：如果您希望保留行号信息，建议您在 proguard.cfg 中添加如下代码：</p>
            <code>
              { '-keepattributes SourceFile, LineNumberTable' }
            </code>
          </div>
        </fieldset>
        <fieldset>
          <legend>4. WebView 性能监控（可选）</legend>
          <div className="form-section">
            <p>如果你需要开启此功能，请确保您的webview有一个webviewclient对象，简单的可以设置如下：</p>
            <code>
              { 'webView.setWebViewClient(new WebViewClient(){});' }
            </code>
            { /* <p className="note-attention">备注：3.0.1 以上版本采用自动插码监测 WebView 数据，用户无需进行配置配置。此文档适用于 3.0.0 及以下版本使用。</p> */ }
          </div>
        </fieldset>
        <fieldset>
          <legend>5. 用户配置信息（可选）</legend>
          <div className="form-section">
            <p>顾名思义，就是说和每一个用户相关联的数据信息。例如崩溃的时候可以根据这个配置查询是哪一个用户发生了崩溃。如下：</p>
            <code>
              { '// 附加数据' } <br />
              { 'HashMap<String,String> extraData = new HashMap<String, String>(); ' } <br />
              { 'String userTel = "15801388723"; ' } <br />
              { 'extraData.put("tel", userTel); ' } <br />
              { 'extraData.put("userId", "888"); ' } <br />
              { 'extraData.put("email", "88888@qq.com"); ' } <br /><br />

              { 'ContextConfig config = new ContextConfig(); ' } <br />
              { 'String searchValue = userTel; ' } <br />
              { 'config.setSearchValue(searchValue); // 设置一个搜索值 ' } <br />
              { 'config.setExtra(extraData); ' } <br /><br />

              { `OneApmAgent.setContextConfig(config);` }
            </code>
          </div>
        </fieldset>
        <fieldset>
          <legend>6. 配置渠道信息（可选）</legend>
          <div className="form-section">
            {
              /**
            <p>在每个 Activity 中导入 OneApmAnalysis 类</p>
            <code>
              { 'import com.oneapm.agent.android.module.analysis.AnalysisModule;' }
            </code>
            <p>在每个 Activity 的 onResume() 方法中添加代码:</p>
            <code>
              { 'AnalysisModule.onResume();' }
            </code>
            <p>如下示例代码：</p>
            <code>
              { '@Override' }<br />
              { 'protected void onResume() {' }<br />
              &nbsp;&nbsp;{ 'super.onResume();' }<br />
              &nbsp;&nbsp;{ 'AnalysisModule.onResume();' }<br />
              { '}' }
            </code>
            <p>在每个 Activity 的 onPause() 方法中添加代码:</p>
            <code>
              AnalysisModule.onPause();
            </code>
            <p>如下示例代码：</p>
            <code>
              { '@Override' }<br />
              { 'protected void onPause() {' }<br />
              &nbsp;&nbsp;{ 'super.onPause(); ' }<br />
              &nbsp;&nbsp;{ 'AnalysisModule.onPause();' }<br />
              { '}' }
            </code>
               */
            }
            <p>配置渠道信息:</p>
            <p>如果您的app需要增加渠道信息请在AndroidManifest.xml的Application标签内添加如下（请把YOU CHANNEL替换成您自己的发布渠道例如豌豆荚、360等）</p>
            <code>
              { '<meta-data android:name ="BluewareChannel" android:value="YOUR  CHANNEL" />' }
            </code>
            {
              /**
            <p className="note-attention">
              注意：<br/>
              &nbsp;&nbsp;&nbsp;&nbsp;1. 如果两个 Activity 是继承关系，只需要在父 Activity 添加即可，如果在两个 Activity 中同时添加，则会造成重复统计。<br/>
              &nbsp;&nbsp;&nbsp;&nbsp;2. 若不添加以上代码，会导致安卓 ANR 率无法计算。
            </p>
               */
            }
          </div>
        </fieldset>
        <fieldset>
          <legend>7. 功能开关（可选）</legend>
          <div className="form-section">
            <p>如果您想使用帧率监控功能可以配置如下代码开启帧监控功能</p>
            <code>
              PerformanceConfiguration.getInstance().setEnableFps(true);
            </code>
          </div>
        </fieldset>
        <fieldset>
          <legend>8. 启动 Agent</legend>
          <div className="form-section">
            <p>在默认启动的 Activity 中 import OneApmAgent类</p>
            <code>
              import com.oneapm.agent.android.OneApmAgent;
            </code>
            <p>在App的第一个Activity的 onCreate() 方法中加入如下调用代码来初始化 OneAPM（其中包含了在步骤 2 中根据应用程序名称而生成的授权编号）</p>
            <code>
              { `OneApmAgent.init(this.getApplicationContext()).setToken("${(this.state.app?this.state.app.token:this.getToken())}").start();` }
            </code>
          </div>
        </fieldset>
        <fieldset>
          <legend>9. 验证是否成功集成探针</legend>
          <div className="form-section">
            <p>在Logcat中过滤oneapm标签，查看是否有类似如下的日志输出即可(VERSION代表发布版本，因版本不同而不同)。</p>
            <code>
              { 'OneAPM started with version :{VERSION}.' }
            </code>
          </div>
        </fieldset>
        <fieldset>
          <legend>10. 静候 5 分钟，开启 OneAPM 之旅</legend>
          <div className="form-section">
            <p>静候 5 分钟，等待应用程序向 OneAPM 发送应用程序性能数据，即可开始使用 OneAPM 应用性能管理。</p>
          </div>
        </fieldset>
      </Resizable>
    )
  }
}
